<template>
	<view class="main" style="padding-bottom: 100rpx;">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-40" @click="UserInfo">
			<view class="u-m-r-10">
				<u-avatar :src="userPicSrc" size="140" mode="circle"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{userName}}</view>
				<view class="u-font-14 u-light-color">{{mobile}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</view>
		</view>
		<view class="money">
			<view style="margin-left: 20rpx; ">
				<view style="color: rgba(0,0,0,.4; font-size: 26rpx;">累计收益(元)</view>
				<view style="font-size: 50rpx; font-weight: 600; margin-top: 10rpx;">{{userMoney}}</view>
			</view>
			<!-- <u-button class="button" size="mini" shape="circle" style="position:absolute;right:140rpx" @click="getMoney">
				提现</u-button> -->
			<u-button class="button" size="mini" shape="circle" style="position:absolute;right:50rpx" @click="detail">
				明细</u-button>

		</view>
		<view class="u-m-t-50">
			<u-cell-group>
				<u-cell-item title="银行卡" @click="bankCard">
					<u-icon slot="icon" name="yinxingqia" custom-prefix="custom-icon" style="margin-right: 10rpx;"
						size="32" color="#ff9930"></u-icon>
				</u-cell-item>
				<u-cell-item title="我的收藏" @click="collection">
					<u-icon slot="icon" name="star-fill" style="margin-right: 10rpx;color: #ff9930;" size="32">
					</u-icon>
				</u-cell-item>
				<u-cell-item title="联系我们" @click="show = true">
					<u-icon slot="icon" style="color:#36cbcb;margin-right: 10rpx;" size="32" name="account-fill">
					</u-icon>
				</u-cell-item>
				<u-cell-item title="关于我们" @click="aboutUs">
					<u-icon slot="icon" style="color:#3aa0ff;margin-right: 10rpx;" size="32" name="error-circle-fill">
					</u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view>
			<u-button style="color: #FFF; background-color: #1890ff; width: 90%; margin-top: 100rpx;" @click="logOut">退出
			</u-button>
		</view>
		<view class="img">
			<u-image style="margin: 200rpx auto 0;" width="30%" mode="widthFix" src="../../static/logo.png"></u-image>
		</view>
		<view>
			<u-popup v-model="show" mode="center" width="500rpx" height="300rpx" border-radius="14" closeable
				close-icon-pos="top-right">
				<view class="contactUs">
					<view style="margin: 20rpx 0; font-size:48rpx;font-weight: 300; color: rgba(0,0,0,0.5)">
						<u-icon name="server-fill" color="#bebebe" size="40"></u-icon>
						客服电话
					</view>
					<view style="font-weight: 600;font-size:40rpx ;">{{telNum}}</view>
					<u-button @click="copy" class="button" style="width: 300rpx;margin: 20rpx 0;">复制号码</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userMobile: "",
				mobile: "", //155****4545
				userName: "",
				userExpert: '',
				userPicSrc: "",
				userMoney: "",
				telNum: "",
				show: false,
			}
		},
		onLoad() {
			if (!this.$u.untils.isLogin()) return
			this.getTelNum()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 退出登录
			logOut() {
				this.$u.vuex('vuex_token', '');
				// this.$u.route({
				// 	type: "redirect",
				// 	url: "/pages/login/login",
				// 	params:{isLogout: true}
				// }) 
				this.$Router.push({
					name: 'login',
					quary: {
						isLogout: true
					}
				})
			},
			// 客服电话号码
			getTelNum() {
				this.$u.api.getConfigInfo({
					key: 'telphone'
				}).then(res => {
					this.telNum = res.data.value
				})
			},
			// 得到个人信息
			getUserInfo() {
				this.$u.api.getUserInfo().then(res => {
					this.userMoney = res.data.money
					this.userName = res.data.nickname
					this.userExpert = res.data.expert
					this.mobile = res.data.mobile
					this.userPicSrc = res.data.avatar
					this.userMobile = res.data.mobile
				})
			},
			// 转向个人信息
			UserInfo() {
				// this.$u.route({
				// 	url: "/pages/center/userInfo/userInfo",
				// 	params: {
				// 		userName: this.userName,
				// 		userExpert: this.userExpert,
				// 		userPicSrc: encodeURIComponent(this.userPicSrc),
				// 		userMobile: this.userMobile
				// 	},
				// })
				this.$Router.push({
					path: '/userInfo',
					query: {
						userName: this.userName,
						// userExpert: this.userExpert,
						userPicSrc: encodeURIComponent(this.userPicSrc),
						userMobile: this.userMobile
					}
				})
			},
			// 复制信息
			copy() {
				this.show = false
				//uni.setClipboardData方法就是讲内容复制到粘贴板
				uni.setClipboardData({
					data: this.telNum, //要被复制的内容
					success: function() {
						//在success中加入uni.hideToast()可以解决
						this.$u.toast('复制成功');
					},
					fail: function(err) {
						this.$u.toast('复制失败');
					}
				});
			},
			aboutUs() {
				// this.$u.route("/pages/center/aboutUs/aboutUs")
				this.$Router.push({
					name: 'aboutUs'
				})
			},
			bankCard() {
				// this.$u.route("/pages/center/bankCard/bankCard")
				this.$Router.push({
					name: 'bankCard'
				})
			},
			collection(){
				this.$Router.push({
					name: 'myCollect'
				})
			},
			getMoney() {
				this.$u.route("/pages/center/getMoney/getMoney", {
					money: this.userMoney
				})
			},
			detail() {
				// this.$u.route("/pages/center/detail/detail")
				this.$Router.push({
					name: 'centerDetail'
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	@import '@/static/icon/iconfont.css';

	page {
		background-color: #FFFFFF;
	}

	.contactUs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	.button {
		background-color: #1890ff;
		color: #FFFFFF;
		width: 100rpx;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		height: 280rpx;
		background-color: #1890ff;
		color: #FFFFFF;
	}

	.money {
		position: relative;
		padding: 40rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		width: 700rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: -80rpx;
		border-radius: 20rpx;
		box-shadow: 0px 2px 5px rgba($color: #000000, $alpha: 0.1);
	}
</style>
